<template>
	<view class="list" v-if="list.length > 0">
		<view v-for="(item, idx) in list" class="table-list" :key="idx" :data-time="item.createTime">
			<view class="avatarMul">
				<image class="avatarImg" :src="val.headSculpture" mode="aspectFill" v-for="(val, index) in item.list"
					:key="index" />
			</view>
			<view class="inline details">
				<view class="listTop">
					<view class="">
						<span class="name f32 bold">{{ item.name==null?"无名":item.name }}</span>
						<span class="all" v-if="item.isMultiple === 1" @click="openShowAll(item.list)">全部</span>
					</view>
					<view class="listRight">
						<!-- <button class="share" plain open-type="share" @click="shareClick(item)"> -->
						<button class="share" plain open-type="share" data-name="shareBtn" @click="shareClick(item)"
							:data-obj="shareParams">
							<view class="icon-share" style="width: 30rpx; height: 30rpx; margin-right: 10rpx;">
							</view>
							分享
						</button>
					</view>
				</view>

				<view class="analyze">
					<u-collapse ref="collapseView" :border="false" @close="handleAnalyzeClose(idx)"
						@open="handleAnalyzeOpen(idx)">
						<u-collapse-item ref="collapseItem" class="f28" title="观察分析" :name="idx" :value="'超小助正在分析中'"
							v-if="item.status==2">
						</u-collapse-item>
						<u-collapse-item ref="collapseItem" class="f28" title="观察分析" :name="idx" :line="5"
							:value="item.expanded?'收起':'展开'" v-else>
							<view v-if="!item.aiAnalysis">
								<view>
									<text class="u-collapse-content text inline f28">
										还未进行分析…
									</text>
								</view>
							</view>
							<view v-else>
								<view style="display: flex;">
									<span class="order inline"></span>
									<text class="u-collapse-content text inline f28"
										:class="{showAllIN:item.expanded, hidetext:!item.expanded}">
										{{ item.aiAnalysis }}
									</text>
								</view>
							</view>

						</u-collapse-item>
					</u-collapse>
					<image class="analyze-icon icon-word-ai" />
					<image class="analyze-title-bottom icon-star-line" />
				</view>
				<view style="margin: 10rpx 0rpx;">
					<span class="f24 time">{{ formatDateYMDHMS(item.createTime) }}</span>
					<span class="delete" @click="handleDelete(item.id, idx)">
						<image class="icon-delete"></image>
					</span>
					<span class="edit" @click="handleEditObserve(item)">
						<image class="icon-edit"></image>
					</span>
				</view>
				<view class="item-content" v-if="item.fileUrl">
					<image class="icon-word" style="width: 30rpx; height: 30rpx; margin-right: 10rpx;"
						@click="copyBtn(item)">
					</image>
					<view class="left-content">教案文件:</view>
					<view class="right-content" @click="copyBtn(item)">
						<view class="text">{{item.fileUrl}}</view>
						<image class="icon-copy icon">
						</image>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'articleList',
		props: {
			list: {
				type: Array,
				default: function(e) {
					return [];
				}
			}
		}
	};
</script>

<style lang="scss">
	/*文章列表*/
	.list {
		margin-top: 2rpx;

		.item {
			padding: 40rpx 24rpx 0 24rpx;

			.info {
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				padding-bottom: 4rpx;

				.text {
					flex-grow: 1;
					flex-shrink: 1;
					display: flex;
					flex-direction: column;
					margin-right: 40rpx;

					.title {
						flex-grow: 1;
						flex-shrink: 1;
						font-size: 34rpx;
						line-height: 1.5;
						display: -webkit-box;
						text-overflow: ellipsis;
						word-break: break-all;
						-webkit-line-clamp: 2;
						-webkit-box-orient: vertical;
						overflow: hidden;
						height: 72rpx;
						margin-bottom: 8rpx;
					}

					.other {
						flex-grow: 1;
						flex-shrink: 1;
						display: flex;
						align-items: center;
						font-size: 28rpx;
						color: #999;
						line-height: normal;

						.left {
							display: flex;
							flex-grow: 1;
							flex-shrink: 1;

							.source {
								display: -webkit-box;
								text-overflow: ellipsis;
								word-break: break-all;
								-webkit-line-clamp: 1;
								-webkit-box-orient: vertical;
								overflow: hidden;
								width: 140rpx;
								margin-right: 16rpx;
							}
						}

						.right {
							display: flex;
							flex-direction: row;
							justify-content: center;
							align-items: center;
							flex-grow: 0;
							flex-shrink: 0;
							margin-right: 5rpx;

							image {
								flex-grow: 1;
								flex-shrink: 1;
								width: 28rpx;
								height: 28rpx;
								margin-right: 12rpx;
							}

							text {
								flex-grow: 1;
								flex-shrink: 1;
								margin-top: -6rpx;
							}
						}

						.view {
							image {
								width: 40rpx;
								height: 40rpx;
								margin-right: 5rpx;
							}
						}
					}
				}

				.photo {
					image {
						height: 170rpx;
						width: 222rpx;
						border-radius: 10rpx;
					}
				}
			}

			.line {
				display: bock;
				width: 100%;
				height: 1rpx;
				margin-top: 22rpx;
				background: #e8e8e8;
			}

			&:last-child {
				.line {
					//display: none;
				}

				//padding-bottom: 30rpx;
			}
		}
	}
</style>